<template>
  <view class="login-container">
    <!-- 顶部Logo区域 -->
    <view class="logo-area">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <text class="app-name">橘子聊天</text>
    </view>

    <!-- 登录表单区域 -->
    <view class="form-container" @click="login">
      <button 
        class="login-btn" 
        open-type="getPhoneNumber" 
        @getphonenumber="handleGetPhone"
        @click="triggerLogin"
      >
        <image class="icon" src="/static/wechat-icon.png" />
        <text>微信一键登录</text>
      </button>
      
      <view class="agreement">
        <text>登录即表示同意</text>
        <text class="link">《用户协议》</text>
        <text>和</text>
        <text class="link">《隐私政策》</text>
      </view>
    </view>

    <!-- 底部其他登录方式 -->
    <view class="other-login">
      <text class="divider">其他登录方式</text>
      <view class="login-methods">
        <view class="method-item">
          <image class="method-icon" src="/static/phone-icon.png" />
          <text>手机号</text>
        </view>
        <view class="method-item">
          <image class="method-icon" src="/static/qq-icon.png" />
          <text>账号/密码</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 存储登录code
const loginCode = ref('');
const isLogging = ref(false);

// 页面加载时检查场景参数（用于小程序码扫码登录）
onLoad((options) => {
  if (options.scene) {
    const sceneParams = decodeURIComponent(options.scene);
    console.log('扫码场景参数:', sceneParams);
    // 实际开发中这里处理扫码登录逻辑
  }
});

// 触发微信登录获取code
const triggerLogin = async () => {
  if (isLogging.value) return;
  
  try {
    isLogging.value = true;
    uni.showLoading({ title: '登录中', mask: true });
    
    // 获取微信登录code[1,6](@ref)
    const loginRes = await new Promise((resolve, reject) => {
      uni.login({
        provider: 'weixin',
        success: resolve,
        fail: reject
      });
    });
    
    loginCode.value = loginRes.code;
    console.log('获取登录code:', loginCode.value);
    
  } catch (err) {
    console.error('微信登录失败:', err);
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'error'
    });
  } finally {
    isLogging.value = false;
    uni.hideLoading();
  }
};

// 处理获取手机号（需要用户主动触发）
const handleGetPhone = async (e) => {
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    return uni.showToast({ title: '已取消授权', icon: 'none' });
  }
  
  try {
    const { code } = e.detail;
    
    // 发送登录请求到后端[1,3](@ref)
    const res = await uni.request({
      url: 'https://your-api-domain.com/auth/wechat',
      method: 'POST',
      data: {
        loginCode: loginCode.value,
        phoneCode: code
      }
    });
    
    // 存储登录凭证[6](@ref)
    if (res.data.token) {
      uni.setStorageSync('token', res.data.token);
      uni.setStorageSync('userInfo', JSON.stringify(res.data.userInfo));
      
      uni.showToast({ title: '登录成功' });
      uni.reLaunch({ url: '/pages/chat/index' });
    }
    
  } catch (error) {
    console.error('登录请求失败:', error);
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'error'
    });
  }
};

function login(){
	// ElMessage.success('登录成功')
	uni.navigateTo({ url: '/pages/main/main' })
}
</script>

<style scoped>
/* 整体布局 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 40rpx;
  background-color: #f8f8f8;
}

/* Logo区域 */
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120rpx;
  margin-bottom: 100rpx;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.app-name {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
  margin-top: 30rpx;
}

/* 登录按钮 */
.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90rpx;
  background-color: #07C160;
  border-radius: 45rpx;
  color: white;
  font-size: 32rpx;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(7, 193, 96, 0.3);
}

.login-btn:active {
  background-color: #06AD56;
  transform: scale(0.98);
}

.icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
}

/* 用户协议 */
.agreement {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40rpx;
  font-size: 24rpx;
  color: #999;
}

.link {
  color: #576B95;
  margin: 0 8rpx;
}

/* 其他登录方式 */
.other-login {
  position: absolute;
  bottom: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divider {
  font-size: 26rpx;
  color: #ccc;
  position: relative;
  margin-bottom: 40rpx;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 120rpx;
  height: 1rpx;
  background-color: #eee;
}

.divider::before {
  right: 100%;
  margin-right: 20rpx;
}

.divider::after {
  left: 100%;
  margin-left: 20rpx;
}

.login-methods {
  display: flex;
  justify-content: center;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 40rpx;
  font-size: 24rpx;
  color: #666;
}

.method-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
  border-radius: 50%;
  background: #f0f0f0;
  padding: 16rpx;
}
</style>